<template>
  <div>
    <el-table :data="msgs" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-class-name="tableRowClassName">>
        <el-table-column prop="type" label="同步失败类型">
        </el-table-column>
        <el-table-column prop="msg" label="同步失败记录">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
            <el-button @click="repair" type="text" size="small" v-if="!scope.row.is_repaired">修复</el-button>
            <el-button disabled type="text" size="small"  v-if="scope.row.is_repaired">已修复</el-button>
            <el-button @click="remove" type="text" size="small" v-if="scope.row.is_repaired">删除</el-button>
        </template>
        </el-table-column>

    </el-table>
  </div>
</template>

<script>
  import test_data from '../../json/test_data.json'
  export default{
      data(){
          return {
              msgs:[]
          }
      },
      mounted:function(){
        this.msgs=test_data.msgs;
      },
      methods:{
            tableRowClassName({row, rowIndex}) {
                console.log(row, rowIndex)
                if (rowIndex === 0) {
                return 'success-row';
                } else if (rowIndex === 1) {
                return 'warning-row';
                }
                return ;
            },
          repair(){
              
          },          
          remove(){
             this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });             
          }
      },

  }
</script>


<style lang="scss">
    .el-table .warning-row {
        background: rgba(200, 0, 0, 0.4) !important;
    }

    .el-table .success-row {
        background: rgba(104, 252, 36, 0.4) !important;
    }
</style>
